<!--  -->
<template>
  <div class="login">
      <!-- <HeaderTop title="忘记密码"></HeaderTop> -->
      <form class="login-wrapper" @submit.prevent="modiPwd">
        <section class="login_message">
          <input type="tel" maxlength="11" placeholder="输入手机号" class="tel" v-model="phone">
          <button class="get_verification" :class="{btn:isGray == true}" @click.prevent="getCode">
            {{computeTime > 0 ? `已发送(${computeTime}s)` : '获取验证码'}}
          </button>
        </section>
        <section class="login_verification">
          <input type="tel" maxlength="8" placeholder="填写验证码" class="veri" v-model="code">
        </section>
        <section class="login_password">
          <input type="text" class="pw" minlength="6" maxlength="15" placeholder="请输入6-15位密码" v-model="password1">
        </section>
        <section class="login_hint">
          <input type="text" class="pw" minlength="6" maxlength="15" placeholder="请确认密码" v-model="password2" @blur="checkpwd()">
        </section>
        <button class="login_submit">确定</button>
      </form>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import { setInterval, clearInterval } from 'timers';
export default {
  data () {
    return {
      computeTime:0, //倒计时时间
      phone:'',
      code:'',//短信验证码
      password1:'', //输入密码
      password2:'',//确认密码
      isGray:false,
    };
  },

  // components: {
  //   HeaderTop
  // },

  computed: {},

  methods: {
    // 异步发送验证码
    async getCode(){
      console.log(111)
      if(!this.phone){
        this.$toast('请输入手机号');
        // this.$dialog.alert({
        //   message:'请输入手机号'
        // })
      }else{
        if(!this.computeTime){
          this.computeTime = 10
          this.isGray = true
          this.IntervalId = setInterval(()=>{
            this.computeTime --
            if(this.computeTime <= 0){
              clearInterval(this.IntervalId)
              this.isGray = false
            }
          },1000)
          const result = await this.API.reqSendCode(this.phone)
          if(result.retCode !== '000'){
            this.$toast(result.retMsg);
            // this.$dialog.alert({
            //   message:result.retMsg
            // })
            if(this.computeTime){
              this.computeTime = 0
              clearInterval(this.IntervalId)
              this.IntervalId = undefined
            }
          }
          // if(result.retCode === '109'){
          //   this.$dialog.alert({
          //     message:'短信验证过于频繁 请120秒后再试'
          //   })
          //   if(this.computeTime){
          //     this.computeTime = 0
          //     clearInterval(this.IntervalId)
          //     this.IntervalId = undefined
          //   }
          // }
        }
      }
    },

    // 验证两次输入密码是否一致
    checkpwd(){
      if(this.password1 !== this.password2){
        this.$toast('两次密码输入不一致 请重新输入');
        // this.$dialog.alert({
        //   message:'两次密码输入不一致 请重新输入'
        // })
        this.password2 = ''
        return 
      }
    },

    // 异步修改密码
    async modiPwd(){
      const {phone, code, password1, password2} = this
      console.log(phone, code, password1, password2)
      if(!phone){
        // 输入手机号
        this.$toast('请输入手机号');
        // this.$dialog.alert({
        //   message: '输入手机号'
        // })
        return 
      }
      if(!code){
        // 输入验证码
        this.$toast('请输入验证码');
        // this.$dialog.alert({
        //   message: '输入验证码'
        // })
        return 
      }
      if(!password1 || !password2){
        // 输入密码
        this.$toast('请输入密码');
        // this.$dialog.alert({
        //   message: '输入密码'
        // })
        return
      }
      let result = await this.API.reqModiPwd({phone,password:password2,sms:code})
      console.log(result)
      if(result.retCode === '000'){
        this.$toast('密码修改成功 请重新登录');
        this.$router.replace('/login')
        // this.$dialog.alert({
        //   message:'密码修改成功'
        // }).then(()=>{
        //   this.$router.replace('/login')
        // })
      }
    }
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.login
  // margin-top 45px
  padding-bottom 0 !important
  width 100%
  height 100%
  background #fff
  overflow hidden
  .login-wrapper
    width 100%
    height 100%
    display flex
    align-items center
    flex-direction column
    padding-top 25px
    button 
      padding 0
      margin 0
      border:1px solid transparent
      outline none
    section
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      overflow hidden
      height 47px
      margin-bottom 16px
      display flex
      justify-content space-between
      input 
        background-repeat no-repeat
        background-size 26px 28px
        background-position 15px 10px
        height 47px
        padding-left 50px
        line-height 47px
        font-size 14px
        width 160px
        &.tel
          background-image url(../../assets/img/tell.png)
        &.veri
          background-image url(../../assets/img/num.png)
        &.pw
          background-image url(../../assets/img/mima.png)
      .get_verification
        width 100px
        // float right 
        background #145B3E
        color #fff
        height 47px
        line-height 47px
        font-size 12px
        &.btn
            background #656565
    .login_submit
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      height 47px
      background #145B3E
      color #fff
</style>